<template>
   <div class="playlist-detail">

<div class="song-list"  >
    <van-icon name="arrow-left" @click="goBack" />
     <img :src="songList.coverImgUrl" class="bg">
    <img :src="songList.coverImgUrl" class="tu">
    <span>{{songList.name}}</span>
</div>

<div class="play">
     <div v-if="songId==''">
       
          <van-button type="primary" class="bofang" >播放</van-button>
    </div>
    
    <div v-else>
    <audio :src="songUrl" controls></audio>
    </div>
</div>
<div class="song">
     <ul>
        <div>
          <li
            class="songlist"
            v-for="(item, index) in song"
            :key="item.id"
          @click="playSong(item)"
          >
            <div class="songnumitem">
              <span class="songnum" v-if="index < 9">0{{ index + 1 }}</span>
              <span class="songnum" v-else>{{ index + 1 }}</span>
              <div class="songlistitem">
                <span class="songname"
                  >{{ item.name }}
                  <!-- {{item.song.artists[0].name}} -->
                </span>
                <br />
                <span
                  class="singername"
                >
                {{item.ar[0].name}}
                </span>
              </div>
            </div>
          </li>
        </div>
      </ul>
</div>

</div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return{
            songList:{},
             song:[],
                songId:"",
                songUrl:"",
        }
    },
    created(){
        this.getData()
    },
    methods:{
        getData(){
            axios.get("http://171.220.242.237:3001/playlist/detail",{
                params:{
                    id:this.$route.params.id
                }
            })  
            .then(res => {
                console.log(res.data)
                this.songList=res.data.playlist
                console.log(res.data.playlist.tracks)
                // 歌手名字
                console.log(res.data.playlist.tracks[0].ar[0].name)
                this.song=res.data.playlist.tracks
                
            })
            .catch(err => {
                console.error(err); 
            })
        },
         goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    },
    playSong(item){
        const id=item.id
        // axios.get("http://171.220.242.237:3001/song/url",{
        //     params:{
        //         id:item.id
        //     }
        // })
         this.$router.push({
             name:'Player',
             params:{id}
                //  path:`/Player/${id}`
             })
        .then(res => {
            console.log(res)
            // this.songUrl=res.data.data[item.songmid]
            // console.log(res.data[0].ar[0].name)
        })
        .catch(err => {
            console.error(err); 
        })
    }
       
    }
}
</script>


<style scoped>

.pic{
    height: 275px;
   
}
.van-icon{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    font-size: 40px;
}
.van-image{
 /* position: relative;
    z-index: 1;
    display: block;
   
    object-fit: cover;
    border-radius: 18px; */
     width: 100%;
    height: 100%;
}
.van-icon{
    font-size: 2rem;
    position: absolute;
    top: 1rem;
    left: 0;
    z-index: 100;
    color: white;
}
.song-list{
    /* display: flex; */
}
.tu{
  margin-top: 20px;
  padding: 0 20px;
  width: 300px;
  height: 300px;
  border-radius:15%;
  float: left;
/* position: absolute; */
  position: absolute;
  left: 20px;
  top: 0px;
}
.song-list span{
      position: absolute;
      top: 10px;
      right: 100px;
    font-size: 24px;
    margin-left: 20px;
    margin-top: 50px;
}
.bg{
    width: 100%;
    height: 350px;
     opacity: 0.2;
}

/* song */
.songnumitem {
  display: flex;
}
.songlistitem {
  text-align: left;
  margin-bottom: 10px;
  border-bottom: rgb(231, 225, 225) 0.1px solid;
  width: 100%;
}
.songlist {
  text-align: left;
  padding: 0 0 0 10px;
}
.songname {
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif, STHeiTi;
  line-height: 1.5;
  color: #333;
}
.singername {
  font-size: 12px;
  color: #888;
  font-family: Arial, Helvetica, sans-serif;
}
.songnum {
  color: #df3436;
  margin-top: 15px;
  margin-right: 15px;
}
</style>